{%extends "base.html"%}
{%block title%}
编辑比赛
{%endblock%}
{%block body%}
<script>
    let contest;
    $(document).ready(() => {
        contest = new Vue({
            delimiters: ['{[', ']}'],
            el: "#contest",
            mixins: [baseMixin],
            data: {
                data: null,
                done: false,
                successMessage: "", errorMessage: ""
            }, methods: {
                submit() {
                    $("html,body").animate({
                        scrollTop: 0
                    });
                    this.errorMessage = this.successMessage = "";
                    let data = {};
                    $.extend(data, this.data);
                    data.start_time = this.fromTimeString(data.start_time);
                    data.end_time = this.fromTimeString(data.end_time);

                    axios.post("/api/contest/update", { contestID: this.data.id, data: data }).then(ctx => {
                        ctx = ctx.data;
                        if (ctx.code) {
                            this.errorMessage = ctx.message;
                            return;
                        }
                        this.successMessage = ctx.message;
                    })
                }, makeTimeString(obj) {
                    let time = new Date(obj);
                    console.log(time);
                    return time.toISOString();
                    // return `${time.getFullYear()}-${time.getMonth()}-${time.getDay()} ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`;
                }, fromTimeString(str) {
                    return parseInt(new Date(str).getTime() / 1000);
                }
            }
        });
        axios.post("/api/contest/raw_data", { contestID: window.location.href.split("/").pop() }).then(ctx => {
            
            ctx = ctx.data;
            if (ctx.code) {
                showErrorModal(ctx.message);
                return;
            }
            contest.data = ctx.data;
            contest.data.start_time = contest.makeTimeString(new Date(contest.data.start_time * 1000));
            contest.data.end_time = contest.makeTimeString(new Date(contest.data.end_time * 1000));
            contest.done = true;
        });
    });
</script>



<div id="contest" v-if="done">
    <div class="ui header ">
        <h1>{[data.name]} - 编辑</h1>
    </div>
    <div class="ui segment stacked">
        <div class="ui form" v-bind:class="{success:successMessage!='',error:errorMessage!=''}">
            <div class="ui success message">
                <div class="header">完成</div>
                {[successMessage]}
            </div>
            <div class="ui error message">
                <div class="header">错误</div>
                {[errorMessage]}
            </div>
            <div class="ui field">
                <label>比赛名</label>
                <input type="text" v-model="data.name">
            </div>
            <div class="ui field">
                <label>比赛描述</label>
                <textarea v-model="data.description"></textarea>
            </div>
            <div class="ui field">
                <label>开始时间</label>
                <input type="text" v-model="data.start_time">
            </div>
            <div class="ui field">
                <label>结束时间</label>
                <input type="text" v-model="data.end_time">
            </div>
            <div class="ui divider"></div>
            <div class="ui field">
                <label>题目列表</label>
                <table class="ui very basic celled table">
                    <thead>
                        <tr>
                            <th>题目ID</th>
                            <th>分数权值</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="problem,i in data.problems">
                            <td><input type="text" v-model.number="problem.id"></td>
                            <td><input type="text" v-model.number="problem.weight"></td>
                            <td>
                                <div class="ui icon buttons">
                                    <div class="ui blue button" v-bind:class="{disabled:i==0}"
                                        v-on:click="data.problems.splice(i-1,0,data.problems.splice(i,1)[0])">
                                        <i class="angle up icon"></i>
                                    </div>
                                    <div class="ui blue button" v-bind:class="{disabled:i==data.problems.length-1}"
                                        v-on:click="data.problems.splice(i+1,0,data.problems.splice(i,1)[0])">
                                        <i class="angle down icon"></i>
                                    </div>
                                    <div class="ui green button" v-on:click="data.problems.splice(i,1)">
                                        <i class="times icon"></i>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="ui tiny green button" v-on:click="data.problems.push({id:1,weight:1})">添加题目</div>
            </div>
            <div class="ui divider"></div>
            <div class="ui field">
                <div class="ui toggle checkbox">
                    <input type="checkbox" v-model="data.ranklist_visible"
                        v-on:click="data.ranklist_visible=!data.ranklist_visible">
                    <label>比赛时显示排行总榜</label>
                </div>
            </div>
            <div class="ui field">
                <div class="ui toggle checkbox">
                    <input type="checkbox" v-model="data.judge_result_visible"
                        v-on:click="data.judge_result_visible=!data.judge_result_visible">
                    <label>比赛时可以得知评测结果</label>
                </div>
            </div>
            <div class="ui field">
                <label>排名依据</label>
                <div class="ui tiny buttons">
                    <div class="ui button" v-bind:class="{active:data.rank_criterion=='max_score'}"
                        v-on:click="data.rank_criterion='max_score'">题目最高得分</div>
                    <div class="ui button" v-bind:class="{active:data.rank_criterion=='last_submit'}"
                        v-on:click="data.rank_criterion='last_submit'">题目最后一次提交</div>
                    <div class="ui button" v-bind:class="{active:data.rank_criterion=='penalty'}"
                        v-on:click="data.rank_criterion='penalty'">罚时</div>
                </div>
            </div>
            <div class="ui divider"></div>
            <div class="ui green button" v-on:click="submit">提交</div>
            <a class="ui red button" :href="'/contest/'+data.id">返回</a>
        </div>
    </div>
</div>

{%endblock%}